<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>教师注册 - 【少儿编程教学平台】</title>
    <link rel="icon" href="/img/logo.png">
    <link rel="stylesheet" type="text/css" href="/css/sRegister-teacher.css">
    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="/js/layer/layer.js"></script>
    <style type="text/css">


    </style>

</head>
<body>
<div class="headerpage"></div>

<div class="wrap">
    <div class="content">
        <div class="content-center">
            <div class="center-title">
                <div class="clogin" onclick="window.location.href='sLogin-teacher'">登录帐号</div>
                <div class="cregister">注册帐号</div>
            </div>
            <div class="center-content">
                <form action="sRegisterTeacher.action" method="post" id="register">

                    <label class="tou">手机号码</label><br>
                    <div class="kuang">
                        <input class="number number-pho" type="text" name="tphone" value=""
                               placeholder="填写你常用的手机号码作为登录帐号">
                    </div>
                    <label class="notice notice-pho"></label><br><br>

                    <label class="tou">用户名</label><br>
                    <div class="kuang">
                        <input class="number number-na" type="text" name="tname" value="" placeholder="中、英文均可，长度为2-6">
                    </div>
                    <label class="notice notice-na"></label><br><br>

                    <label class="tou">密码</label><br>
                    <div class="kuang">
                        <input class="number number-pwd" type="password" name="tpassword" value=""
                               placeholder="5-20位英文、数字、符号，区分大小写">
                    </div>
                    <label class="notice notice-pwd"></label><br><br>


                    <button type="button" class="btn-register">立即注册</button>

                </form>
            </div>
        </div>
    </div>
</div>
<div class="footerpage"></div>
<script type="text/javascript">

    $(function () {
        $(".headerpage").load("header.jsp");
        $(".footerpage").load("footer.jsp");

        var val1 = false, val2 = false, val3 = false

        $(".clogin").click(function () {
            $(".clogin").css("background-color", "white");
            $(".cregister").css("background-color", "transparent");
        })

        $(".cregister").click(function () {
            $(".cregister").css("background-color", "white");
            $(".clogin").css("background-color", "transparent");
        })

        $("button").click(function () {

            if (val1 && val2 && val3) {

                $("#register").submit();

            } else {
                layer.alert('请按照规范填写信息', {
                    skin: 'layui-layer-molv' //样式类名
                    , closeBtn: 0
                });
            }

        })

        $("[name='tphone']").change(function () {
            var reg1 = /^(173|177|150|152|182|186|199|138|133|151)[0-9]{8}$/;
            if (reg1.test($("[name='tphone']")[0].value)) {
                val1 = true;
                $(".notice-pho").html("");
            } else {
                val1 = false;
                $(".notice-pho").html("手机号码不符合规则");
                $(".number-pho").css("border ", "1px solid red");
            }
        })

        $("[name='tname']").change(function () {
            var reg2 = /^[\u4E00-\u9FA5A-z]{2,6}$/;
            if (reg2.test($("[name='tname']")[0].value)) {

                $.ajax({
                    type: 'post',
                    url: 'validateNameTeacher.action',
                    data: {
                        "name": $("[name='tname']")[0].value
                    },

                    contentType: "application/x-www-form-urlencoded",

                    dataType: 'json',

                    success: function (data) {

                        if (data) {
                            val2 = true;
                            $(".notice-na").html("");
                        } else {
                            val2 = false;
                            $(".notice-na").html("用户名重复");
                            $(".number-na").css("border ", "1px solid red");
                        }
                    },

                    error: function (data) {
                        console.log("请求失败");
                    }


                })
            } else {
                val2 = false;
                $(".notice-na").html("用户名不符合规则");
                $(".number-na").css("border ", "1px solid red");
            }
        })

        $("[name='tpassword']").change(function () {
            var reg3 = /^[A-z0-9_$]{5,20}$/;
            if (reg3.test($("[name='tpassword']")[0].value)) {
                val3 = true;
                $(".notice-pwd").html("");
            } else {
                val3 = false;
                $(".notice-pwd").html("密码不符合规则");
                $(".number-pwd").css("border ", "1px solid red");
            }
        })


    })
</script>

</body>
</html>